<template>
  <div class="qrcode-mask" @touchmove.prevent>
    <div v-if="showPanel" class="qrcode-panel">
      <div class="img">
        <img @load="showCanvas" :src="goodImg" alt="" />
      </div>
      <div class="item-name">
        {{ goodInfo.name }}
      </div>
      <div v-if="goodInfo.discount_price" class="price">
        ¥{{ goodInfo.discount_price }}
      </div>
      <div v-else class="price">{{ goodInfo.price }}</div>
      <div class="user-info">
        <!-- <img :src="avatar" alt="" /> -->
        来自{{ nickname }}的分享
      </div>
      <img class="qrcode" :src="qrcode" alt="" />
      <div class="notice">长按图片保存到相册</div>
    </div>
    <img class="share-img" :src="imgUrl" alt="" />
    <button @click="$emit('qrcodeClose')" class="close"></button>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { getShareInfo } from "@/api/mall";
import QRCode from "qrcode";
import { mapState } from "vuex";
export default {
  props: ["goodInfo"],
  data() {
    return {
      imgUrl: "",
      showPanel: true,
      invite_code: "",
      goodImg: "",
      qrcode: "",
      avatar: ""
    };
  },
  computed: {
    ...mapState({
      nickname: state => state.user.nickname
    })
  },
  methods: {
    showCanvas() {
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      html2canvas(document.getElementsByClassName("qrcode-panel")[0], {
        useCORS: true,
        backgroundColor: null
      }).then(canvas => {
        document
          .getElementsByClassName("qrcode-mask")[0]
          .removeChild(document.getElementsByClassName("qrcode-panel")[0]);
        this.imgUrl = canvas.toDataURL("image/jpeg");
        // console.log(this.imgUrl);
        this.$dialog.loading.close();
        this.showPanel = false;
      });
    }
  },
  mounted() {},
  created() {
    this.$dialog.loading.open("加载中");

    getShareInfo({ item_no: this.goodInfo.item_no }).then(res => {
      if (res.status === 200) {
        this.goodImg = res.data.data.share;
        this.invite_code = res.data.data.code;
        // this.avatar = res.data.data.avatar;
        QRCode.toDataURL(
          window.location.href + "/?invite_code=" + this.invite_code
        )
          .then(url => {
            this.qrcode = url;
          })
          .catch(err => {
            console.error(err);
          });
      }
    });
  }
};
</script>

<style lang="less" scoped>
.qrcode-mask {
  z-index: 99999;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;

  .share-img {
    display: block;
    // position: relative;
    width: 78%;
    height: 18rem;
    margin: auto;
    margin-top: 10vh;
    border-radius: 0.4rem;
    border: none;
  }

  .qrcode-panel {
    position: relative;
    width: 78%;
    height: 18rem;
    margin: auto;
    margin-top: 10vh;
    background-color: #fff;
    border-radius: 0.4rem;
    overflow: hidden;
    .img {
      height: 11.8rem;
      width: 100%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .item-name {
      color: rgba(68, 68, 68, 1);
      font-size: 0.64rem;
      padding: 0.3rem 0.6rem 0.2rem;
      text-align: left;
      overflow: hidden;
      max-height: 2rem;
    }

    .price {
      color: rgba(244, 67, 73, 1);
      font-weight: bold;
      font-size: 0.64rem;
      padding: 0 0.6rem;
      text-align: left;
    }

    .user-info {
      position: absolute;
      left: 0.6rem;
      bottom: 1.44rem;
      color: rgba(68, 68, 68, 1);
      font-size: 0.56rem;
      img {
        border-radius: 50%;
        width: 1.48rem;
        height: 1.48rem;
        margin-right: 0.48rem;
        vertical-align: middle;
      }
    }

    .qrcode {
      position: absolute;
      bottom: 1.44rem;
      right: 0.6rem;
      height: 2.4rem;
      width: 2.4rem;
    }

    .notice {
      text-decoration: underline;
      color: rgba(0, 132, 255, 1);
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 0.48rem;
      font-size: 0.48rem;
    }
  }

  .close {
    width: 1.2rem;
    height: 1.2rem;
    border: none;
    background-image: url("../../../assets/new-icon/关闭 (1).png");
    font-size: 0.8rem;
    padding: 0;
    border-radius: 50%;
    margin-top: 0.8rem;
  }
}
</style>
